<template>
  <div :id="id"></div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: ""
    },
    dataList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.getChars();
  },
  methods: {
    getChars() {
      // let dataList = [];
      let data1 = this.dataList;
      let data2 = {
        ...this.dataList,
        value: data1.value / 2
      };
      data1.name = data1.value + "\n" + data1.text;
      data2.name = data2.value + "\n" + data2.text;

      // 1. 实例化对象
      var option = {
        grid: {
          top: "20%",
          left: "10%",
          right: "3%",
          bottom: "20%",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["82%", "100%"],
            color: [this.dataList.color, "#fff"],
            label: {
              show: true,
              position: "center",
              fontSize: this.$fontSize(0.1),
              fontWeight: "bold",
              color: "#fff"
            },
            data: [
              {
                ...data1,
                formatter: function(params) {
                  console.log(params);
                }
              },
              data2
            ]
          }
        ]
      };
      var twChart = this.$echarts.init(document.getElementById(this.id));
      twChart.setOption(option);
      setTimeout(function() {
        window.onresize = function() {
          twChart.resize();
        };
      }, 200);
    }
  }
};
</script>

<style>
</style>